//一、渲染页面

//1.获取dom元素
const booksList = document.querySelector('#tb')

//定义根路径
// const baseUrl = 'http://ajax-base-api-t.itheima.net'
axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net'

//2.发起请求获取数据,封装函数
const getBookList = () => {
  axios({
    url: '/api/getbooks',
    method: 'get',
  })
    .then(({ data: res }) => {
      //   console.log(res)
      const { data } = res

      const htmlStr = data
        .map(item => {
          return `<tr>
        <td>${item.id}</td>
        <td>${item.bookname}</td>
        <td>${item.author}</td>
        <td>${item.publisher}</td>
        <td><a href="#" data-id="${item.id}">删除</a></td>
      </tr>`
        })
        .join('')

      booksList.innerHTML = htmlStr
    })
    .catch(err => {
      //   console.dir(err)
      alert(err.message)
    })
}

//3.调用渲染函数
getBookList()

//二、添加功能
//1.获取dom元素
const form = document.querySelector('#bookForm')
const selbtn = document.querySelector('button[type=select]');
const addbtn = document.querySelector('button[type=btnAdd');

// selbtn.addEventListener('click',function(e){
//   e.preventDefault()
//   const params = serialize(form)
//   console.log(params);
//   axios({
//     url: '/api/getbooks',
//     method: 'get',
//     params
//   }).then(({data:res})=>console.log(res))


// })
//2.绑定提交事件
form.addEventListener('submit', function (e) {
  console.log(e.target.dataset.name);
  //阻止默认提交事件
  e.preventDefault()
  if(e.target.dataset.name==='add'){
//获取form表单中的值
const data = serialize(this)
console.log(data)
//发起请求
axios({
  url: '/api/addbook',
  method: 'post',
  data,
})
  .then(({ data: res }) => {
    const { msg, status } = res

    alert(msg)

    if (status !== 201) return

    getBookList()

    //重置表单的值
    form.reset()
  })
  .catch(err => {
    alert(err.message)
  })
  }else if(e.target.dataset.name==='sel'){
    const params = serialize(this)
console.log(params)
//发起请求
axios({
  url: '/api/getbooks',
  method: 'get',
  params,
})
  .then(({ data: res }) => {
    const { msg, status } = res

    alert(msg)

    if (status !== 201) return

    getBookList()

    //重置表单的值
    form.reset()
  })
  .catch(err => {
    alert(err.message)
  })
  }

  
})

//三、删除功能
//1.获取dom

//2.绑定事件
booksList.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    //获取id
    let id = e.target.dataset.id

    //发起删除请求
    axios({
      url: '/api/delbook',
      params: { id },
    }).then(({ data: res }) => {
      const { msg, status } = res

      alert(msg)

      if (status !== 200) return

      getBookList()
    })
  }
})
